<template>
  <div id="businesses">
    <el-row   style="margin: auto;">
      <el-col :span="12">
        <el-form :model="businesses" :rules="rules"   label-width="80px" style="margin: auto;width: 900px;">
          <!--  图片 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="营业执照" prop="license" class="color1">
                <el-upload
                    v-model="businesses.license"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false"
                    :on-success="image1"
                    :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl1v1" :src="imageUrl1v1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店" prop="storePicture" class="color1">
                <el-upload
                    v-model="businesses.storePicture"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false"
                    :on-success="image2"
                    :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl1v2" :src="imageUrl1v2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 店铺名和负责人-->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="storeName" label="店铺名" class="color1">
                <el-input v-model="businesses.storeName" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  prop="chargePerson" label="负责人" class="color1">
                <el-input v-model="businesses.chargePerson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 身份证和手机号码-->
          <el-row>
            <el-col :span="6">
              <el-form-item   prop="identityCard" label="身份证" class="color1">
                <el-input v-model="businesses.identityCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item   prop="phone"  label="手机号码" class="color1">
                <el-input v-model="businesses.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 地址-->
          <el-row>
            <el-col :span="6">
              <el-form-item  prop="location" label="地址" class="color1">
                <template>
                  <el-input v-model="businesses.location"></el-input>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="insert()" :disabled="addReadonly">注册</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "businesses",
  data() {
    return {

      //商户个人信息
      businesses:{
        balance:0,
        userId:this.$root.uid
      },
      // 图片地址
      imageUrl1v1: '',
      imageUrl1v2: '',

      //
      uid:window.sessionStorage.getItem('userId1'),
      // 注册是否禁用
      addReadonly:false,

      rules: {
        license: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
        storePicture: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
        storeName: [
          { required: true, message: '店铺名不能为空', trigger: 'blur' }
          ,
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        chargePerson: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        identityCard:[
          { required: true, message: '身份证不能为空', trigger: 'blur' }
          ,
          { min: 18, max: 18, message: '身份证长度错误', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '手机号码不能为空', trigger: 'blur' }
          ,
          { min: 11, max: 11, message: '手机号码长度错误', trigger: 'blur' }
        ],
        location:[
          { required: true, message: '地址1不能为空', trigger: 'blur' }
        ]
      },
    };
  },
  methods: {
    //图片上传前
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isJPG = file.type
      const isLt2M = file.size / 1024 / 1024 < 2;


      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //营业执照图片上传后
    image1(rel){
      console.log("rel",rel)
      this.imageUrl1v1=rel
      this.businesses.license=this.imageUrl1v1
    },
    //店铺图片上传后
    image2(rel){
      console.log("rel",rel)
      this.imageUrl1v2=rel
      this.businesses.storePicture=this.imageUrl1v2
    },
    insert(){
      this.$axios.post(`Businesses/insert`,this.businesses).then(r => {
        if(r.data==="ok"){
          console.log("表新增商户成功")
        }
        this.$message.success("正在申请管理员审核")
                this.$router.push("/User")
      })
    },

  },
  created() {
    //查商户表
    this.$axios.post(`Businesses/selectById1/${this.$root.uid}`).then(r => {

      console.log("账号商户审核标志",r.data.checkTag)
      if(r.data.checkTag==="S001-0"){
        this.$message.error("管理员正在审核,请耐心等待")
        this.addReadonly=true
      }
      if (r.data.checkTag==="S001-2"){
        this.$message.error("商户注册未通过,请重新注册")
        this.addReadonly=false
      }
    })
  }
}
</script>
<style scoped>

</style>